<template>
 <div>
   <router-link tag="div" to="/"
   class="header-abs"
   v-show="showAbs">
     <div class="iconfont header-abs-back">&#xe624;</div>
   </router-link>
   <!-- 每个元素可以绑定一个动态的style    :style -->
   <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
     <router-link to="/">
       <div class="iconfont header-fixed-back">&#xe624;</div>
     </router-link>
     景点详情
   </div>
 </div>
</template>

<script>
  export default {
    name:'DetailHeader',
    data () {
      return {
        showAbs:true,
        opacityStyle: {
          opacity:0
        }
      }
    },
    methods:{
      handleScroll (){
        const top = document.documentElement.scrollTop
        if(top > 60){
          // 渐隐渐现效果
          let opacity = top / 140
          opacity = opacity > 1 ? 1:opacity
          this.opacityStyle = { opacity }
          this.showAbs = false
        }else{
          this.showAbs = true
        }
      }
    },
    // 因为之前定义过keep-alive方法，所以activated会被执行
    activated () {
      window.addEventListener('scroll',this.handleScroll)
    },
    deactivated () {
      window.removeEventListener('scroll',this.handleScroll)
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header-abs
    position :absolute
    left :.2rem
    top :.2rem
    width :.8rem
    height :.8rem
    line-height :.8rem
    border-radius :.4rem
    text-align :center
    background :rgba(0,0,0,.8)
    .header-abs-back
      color :#FFF
      font-size :.4rem
  .header-fixed
    z-index :2
    position :fixed
    top :0
    left :0
    right :0
    height :$headerHeight
    line-height :$headerHeight
    text-align :center
    color :#fff
    background :$bgColor
    font-size :.32rem
    .header-fixed-back
      position :absolute
      top :0
      left :0
      width :.64rem
      text-align :center
      font-size :.4rem
      color :#fff


</style>
